<!-- 首页 -->
<template>
  <div class="container-index">
    <div class="warpper">
      <div>
        <!-- 头部 -->
        <div class="nav-bar">
          <div class="left" @click="onClickLeft">
            <!-- <div class="left"> -->
            <p>
              <img src="./assets/9.png" class="avater" alt slot="left" />
            </p>
            <p class="user-name">
              <span>{{ user.cName }}</span>
              <br />
              <span>{{ user.job }}</span>
            </p>
          </div>
          <div class="title">首页</div>
          <div class="right" @click="handle">
            <img class="canmna" src="./assets/10.png" alt />
          </div>
        </div>
        <!-- 内容-->
        <div class="center">
          <!-- 8个图标-->
          <div class="icon-8">
            <div @click="$router.push({ path: '/timeManagement' })">
              <p>
                <img src="./assets/1.png" class="img-size" />
              </p>
              <p class="nav-name">时间管理</p>
            </div>
            <div @click="$router.push({ path: '/rangeManagement' })">
              <p>
                <img src="./assets/2.png" class="img-size" />
              </p>
              <p class="nav-name">范围管理</p>
            </div>
            <div @click="$router.push({ path: '/modules/allPurchase' })">
              <p>
                <img src="./assets/3.png" class="img-size" />
              </p>
              <p class="nav-name">采购管理</p>
            </div>
            <div @click="$router.push({ path: '/CostControl' })">
              <p>
                <img src="./assets/4.png" class="img-size" />
              </p>
              <p class="nav-name">成本管理</p>
            </div>
            <div @click="$router.push({ path: '/quality' })">
              <p>
                <img src="./assets/5.png" class="img-size" />
              </p>
              <p class="nav-name">质量管理</p>
            </div>
            <div @click="$router.push({ path: '/Risk' })">
              <p>
                <img src="./assets/6.png" class="img-size" />
              </p>
              <p class="nav-name">风险管理</p>
            </div>
            <div @click="$router.push({ path: '/humanResources' })">
              <p>
                <img src="./assets/7.png" class="img-size" />
              </p>
              <p class="nav-name">人力资源</p>
            </div>
            <div @click="$router.push({ path: '/communicateDetail' })">
              <p>
                <img src="./assets/8.png" class="img-size" />
              </p>
              <p class="nav-name">沟通管理</p>
            </div>
          </div>
          <!-- 消息中心-->
          <div class="message">
            <div class="message-header">
              <p class="f">
                <van-icon name="arrow" class="leftArrow" />
                <span class="mess-title">消息中心</span>
              </p>
              <!-- <p @click="$router.push({ path: '/myMessage' })">
                <span class="mess-title-2">查看更多</span>
                <img class="icon-11" src="./assets/12.png" alt />
              </p> -->
            </div>
            <vue-seamless-scroll
              :data="messageList"
              class="seamless-warp"
              :class-option="classOption"
            >
              <ul class="message-list" v-if="messageList.length>0">
                <li
                  v-for="mes in messageList"
                  :key="mes.index"
                  @click="topage(mes.ModeType)"
                >
                  <span class="title"> {{ splitMes(mes.Message)[0] }}</span>
                  {{ splitMes(mes.Message)[1] }}
                </li>
              </ul>
              <div v-else class="nodata"><img :src="nodata" alt="" /></div>
              <div>
               
              </div>
            </vue-seamless-scroll>
          </div>
          <!-- 我的任务 -->
          <div class="message task">
            <div class="message-header">
              <p class="f">
                <van-icon name="arrow" class="leftArrow" />
                <span class="mess-title">我的任务</span>
              </p>
            </div>
            <div class="f taskCont fb">
              <div class="taskItem f fc fn">
                <div class="taskItemTop" @click="toRisk(2, 1)">
                  <img src="./assets/16.png" alt="" class="taskimg" />
                  <span>{{
                    riskList[0].Count != null ? riskList[0].Count : 0
                  }}</span>
                </div>
                <div class="taskItemBot">我的发布</div>
              </div>
              <div class="taskItem f fc fn">
                <div class="taskItemTop" @click="toRisk(0, 2)">
                  <img src="./assets/15.png" alt="" class="taskimg" />
                  <span>{{
                    riskList[1].Count != null ? riskList[1].Count : 0
                  }}</span>
                </div>
                <div class="taskItemBot">整改中</div>
              </div>
              <div class="taskItem f fc fn">
                <div class="taskItemTop" @click="toRisk(1, 3)">
                  <img src="./assets/14.png" alt="" class="taskimg" />
                  <span>{{
                    riskList[2].Count != null ? riskList[2].Count : 0
                  }}</span>
                </div>
                <div class="taskItemBot">已整改</div>
              </div>
              <div class="taskItem f fc fn">
                <div class="taskItemTop" @click="toRisk(0, 4)">
                  <img src="./assets/17.png" alt="" class="taskimg" />
                  <span>{{
                    riskList[3].Count != null ? riskList[3].Count : 0
                  }}</span>
                </div>
                <div class="taskItemBot">已逾期</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%; height: 60px"></div>
      <transition name="layer-b">
        <div class="layer-bg" v-if="isShowMenu"></div>
      </transition>
      <van-actionsheet
        class="index-actionsheet"
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        @select="onSelect"
        @cancel="onCancel"
      />
      <input
        @change="fileChange($event)"
        type="file"
        id="upload_file"
        multiple
        style="display: none"
      />
    </div>
    <input
      @change="fileChange($event)"
      type="file"
      id="index_upload"
      data-id="index_upload"
      multiple
      style="display: none"
    />
  </div>
</template>

<script type='textecmascript-6'>
import vueSeamlessScroll from "vue-seamless-scroll";

import { GetRiskUserCountList } from "@/api/api";
import axios from "axios";
import qs from "querystring";
//混入
import interfaces from "./modules/interfaces.js";
import Camera from "@/common/Camera/Camera.js";
import upLoad from "@/common/mixins/upLoad.js";
// vuex
import { mapMutations } from "vuex";
// 组件
import issuetab from "./components/issue";
export default {
  mixins: [interfaces, Camera, upLoad],
  data() {
    return {
               nodata: require("./assets/nodata.png"),
      user: {
        cName: "",
        job: "",
      },
      messageList: [], //公告（我的消息）
      show: false,
      actions: [
        {
          id: 0,
          name: "拍照",
        },
        {
          id: 1,
          name: "从手机相册选择",
        },
      ],
      photoList: [], //图片
      riskList: [],
    };
  },
  created() {
    this.$store.commit("GET_PAGE_ACTIVE", 0);
    this._initData();
    this.select(); //风险管理标准
  },
  computed: {
    isShowMenu() {
      return this.$store.getters.getIsShowMenu;
    },
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    this.$store.commit("GET_PAGE_ACTIVE", 0);
    /**
     * 版本检测
     */
    let currentVersion = "", //旧版本号
      newVersion = "", //新版本号
      wgtUrl = "";
    console.log("aa");
    document.addEventListener("plusready", () => {
      console.log("进入plusready");
      plus.runtime.getProperty(plus.runtime.appid, (inf) => {
        // wgtVer = inf.version;
        console.log("进入getProperty");
        console.log(JSON.stringify(inf));
        currentVersion = inf.version;
        axios.get(`${config.URL}/api/Home/GetAPPVersionNo`).then((res) => {
          console.log(JSON.stringify(res));
          console.log(res.data.Message);
          newVersion = res.data.Message;
          console.log("旧版本", currentVersion);
          console.log(newVersion);
          console.log(newVersion == currentVersion);
          if (currentVersion != newVersion) {
            console.log("版本有更新");
            plus.nativeUI.confirm(
              `${newVersion}`,
              (e) => {
                if (e.index == 0) {
                  downWgt(); // 下载wgt资源包
                }
              },
              `检测到最新版本`,
              ["下载", "取消"]
            );
          }
        });
      });
    });

    // 下载wgt文件
    let downWgt = () => {
      plus.nativeUI.showWaiting("下载更新");
      console.warn(`${config.URL}/api/Home/GetAPPUrl`);
      axios.get(`${config.URL}/api/Home/GetAPPUrl`).then((res) => {
        console.log(JSON.stringify(res));
        if (res.data.StatusCode == 200) {
          wgtUrl = res.data.Message;
          plus.downloader
            .createDownload(
              wgtUrl,
              { filename: "_doc/update/" },
              (file, status) => {
                if (status == 200) {
                  console.log("下载更新成功：" + file.filename);
                  installWgt(file.filename); // 安装wgt资源包
                } else {
                  console.log("下载更新失败！");
                  plus.nativeUI.toast("下载更新失败！");
                }
                plus.nativeUI.closeWaiting();
              }
            )
            .start();
        } else {
          plus.nativeUI.closeWaiting();
        }
      });
    };
    // 更新应用资源
    let installWgt = (path) => {
      plus.nativeUI.showWaiting("安装更新");
      plus.runtime.install(
        path,
        {},
        () => {
          plus.nativeUI.closeWaiting();
          console.log("安装更新成功！");
          plus.nativeUI.alert("更新完成！", () => {
            //  更新完成后重启应用
            plus.runtime.restart();
          });
        },
        (e) => {
          plus.nativeUI.closeWaiting();
          console.log("安装更新失败！[" + e.code + "]：" + e.message);
          plus.nativeUI.toast("安装更新失败！[" + e.code + "]：" + e.message);
        }
      );
    };
  },

  methods: {
    async select() {
      let res = await this.Request(
        GetRiskUserCountList({
          ProjectID: localStorage.getItem("projectid"),
          userId: localStorage.getItem("userId"),
        })
      );
      if (res.StatusCode === 200) {
        this.riskList = res.Detiel;
      } else {
        this.$message({
          type: "error",
          message: res.Message,
          center: "true",
        });
      }
    },
    //去风险管理页面
    toRisk(active, flag) {
      this.$router.push({
        //核心语句
        path: "/Risk",
        query: {
          active,
          flag,
        },
      });
    },
    splitMes(obj) {
      if (obj) {
        var mes = obj.split(":");
        return mes;
      }
    },
    _initData() {
      // 获取我的消息
      let params = {
        UserId: localStorage.getItem("userId"),
        ProjectId: localStorage.getItem("projectid"),
        page: 1,
        rows: 4,
      };
      this.queryNoticeList(params).then((res) => {
        this.messageList = res.Detiel;
      });
      let loginInfo = JSON.parse(localStorage.getItem("loginUserInfo"));
      this.user.cName = loginInfo.loginUserInfo.cName;
      this.user.job = loginInfo.loginUserInfo.cRoleName;
    },
    //消息中心去页面
    //类型（1塔吊预警 2扬尘预警 3噪音预警 4升降机预警 5物料进场 6方案交底
    //7逾期提醒 8日报提醒 9设备离线 ）
    topage(ModeType) {
      if (ModeType == 1) {
        this.$router.push({ path: "/towerCrane" });
      } else if (ModeType == 2) {
        this.$router.push({ path: "/dustIndex" });
      } else if (ModeType == 3) {
        this.$router.push({ path: "/noiseIndex" });
      } else if (ModeType == 4) {
        this.$router.push({ path: "/elevator" });
      } else if (ModeType == 5) {
        this.$router.push({ path: "/materialIndex" });
      } else if (ModeType == 6) {
        this.$router.push({ path: "/quality" });
      } else if (ModeType == 7) {
        this.$router.push({ path: "/Risk" });
      } else if (ModeType == 8) {
        this.$router.push({ path: "/reportDetail" });
      } else if (ModeType == 9) {
        this.$router.push({ path: "/communicateDetail" });
      }
    },

    onClickLeft() {
      //打开侧边栏
      // this.upIsShowMenu(true);
      this.$store.commit("UPDATE_TOMEMU", new Date().getTime());
    },
    onClickRight() {
      // Toast('按钮');
    },
    ...mapMutations({
      upIsShowMenu: "IS_SHOW_MENU",
    }),
    /**
     * 点击拍照
     */
    handle() {
      this.show = true;
    },
    /**
     * 选择
     */
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      console.log(item);
      if (item.id == 0) {
        // 拍照
        this.captureImage().then((imglist) => {
          console.log("imglist:");
          console.log(JSON.stringify(imglist));
          console.log(imglist[0].TokenUrL + imglist[0].smallPhotoURL);
          this.photoList.push(imglist[imglist.length - 1]);
          // this.$router.push({path:'/abarbeitung'})
          this.$store.commit(
            "INTEGRATION_IMG_DATA",
            imglist[imglist.length - 1]
          );
          this.$router.push({ path: "/integration" });
        });
        this.phone_show = false;
      } else if (item.id == 1) {
        // 从相册中选择
        this.fileClick("index_upload");
        this.show = false;
      }
    },
    /**
     * 取消
     */
    onCancel() {
      console.log("取消");
    },
  },
  components: { issuetab, vueSeamlessScroll },
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
.leftArrow {
  font-size: 32px;
  font-weight: bold;
  color: #699fff;
}
.nodata {
  width: 100%;
  height: 340px;
  text-align: center;
  background :#f5f5f9;

  img {
    //  width: 100%;
   height:340px;
  }
}
.taskCont {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  height: 250px;
  background: #fff;
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;

  .taskItem {
    .taskItemTop {
      width: 107px;
      height: 107px;
      border-radius: 100%;
      position: relative;
      margin-bottom: 10px;

      .taskimg {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }

      span {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        padding: 2px 10px;
        box-sizing: border-box;
        background: #E60012;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 30px;
      }
    }
  }
}

.container-index {
  width: 750px;
  height: 100%;
  overflow: auto;
  background: #fff;

  .warpper {
    width: 100%;
    height: 100%;
    overflow: auto;

    .nav-bar {
      width: 100%;
      height: 100px;
      background-color: #699FFF;
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 0;

      .left {
        display: flex;
        width: 230px;

        .user-name {
          box-sizing: border-box;
          padding: 12px 0 0 12px;

          span {
            display: inline-block;
            font-size: 28px;
            font-family: SourceHanSansCN-Regular;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 32px;
            padding-top: 5px;
            white-space: nowrap;
          }
        }

        .avater {
          width: 80px;
          height: 80px;
          display: inline-block;
          padding: 12px 0 0 20px;
        }
      }

      .title {
        flex: 1;
        text-align: center;
        font-size: 36px;
        font-family: SourceHanSansCN-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 100px;
      }

      .right {
        width: 230px;

        .canmna {
          width: 40px;
          height: 30px;
          float: right;
          padding: 30px 20px;
        }
      }
    }

    .center {
      margin-top: 100px;

      .icon-8 {
        box-sizing: border-box;
        box-shadow: 0px 2px 8px 0px rgba(220, 226, 237, 1);
        padding: 0 20px;
        width: 100%;
        height: 412px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 20px;

        >div {
          width: 160px;
          padding-top: 30px;

          p {
            text-align: center;

            .img-size {
              width: 100px;
              height: 100px;
              background: linear-gradient(180deg, rgba(255, 201, 141, 1) 0%, rgba(253, 179, 61, 1) 100%);
              border-radius: 36px;
            }
          }

          .nav-name {
            font-size: 28px;
            font-family: SourceHanSansCN-Regular;
            font-weight: 400;
            color: rgba(34, 40, 51, 1);
            line-height: 42px;
            margin-top: 10px;
          }
        }
      }
    }

    .message {
      margin: 20px 0 0 0;
      height: 420px;

      .message-header {
        height: 80px;
        width: 100%;
        display: flex;
        background-color: white;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;

        p {
          line-height: 80px;

          img {
            vertical-align: middle;
          }

          .mess-title, .mess-title-2 {
            font-family: SourceHanSansCN-Medium;
            line-height: 32px;
            vertical-align: middle;
            margin-left: 16px;
          }

          .mess-title {
            color: #000;
            font-size: 32px;
            font-weight: 500;
          }

          .mess-title-2 {
            color: #5A92FF;
            font-weight: 400;
            font-size: 28px;
            margin-right: 6px;
          }
        }
      }

      .seamless-warp {
        width: 100%;
        height: 340px;
        overflow: hidden;
      }

      .message-list {
        width: 100%;
        background-color: white;
        box-sizing: border-box;
        padding: 0 20px;

        // box-shadow: 0px 2px 8px 0px rgba(220, 226, 237, 1);
        li {
          height: 80px;
          background: #EBEBEB;
          border-radius: 10px;
          // border-bottom: 1px solid #E5E5E5;
          line-height: 80px;
          font-size: 26px;
          font-family: SourceHanSansCN-Medium;
          font-weight: 500;
          color: #000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 16px;
          padding: 0 20px;
          box-box-sizing: border-box;

          .title {
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #0084FF;
          }
        }
      }
    }

    .task {
      height: auto;
    }

    .layer-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2999;
      background-color: black;
      opacity: 0.3;
    }
  }
}

.container-index {
  width: 750px;
  overflow: hidden;

  .warpper {
    width: 100%;
    height: 100%;

    .layer-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2999;
      background-color: black;
      opacity: 0.3;
    }
  }
}
</style>
<style>
.layer-b-enter,
.layer-b-leave-to {
  opacity: 0 !important;
}
.layer-b-enter-active,
.layer-b-leave-active {
  transition: opacity 0.1s;
}
.layer-b-enter-to,
.layer-b-leave {
  opacity: 0.3;
}
</style>
<style>
.icon-11 {
  width: 35px;
  height: 31px;
}
.el-loading-mask {
  z-index: 100;
}
.index-actionsheet.van-popup.van-popup--bottom.van-actionsheet {
  /* left: 72%; */
  position: absolute;
}
</style>

